<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import { calMenuChosen } from "../Menu/Menu";
import { useUserStore } from "../../../utils/store/store";
import { userType } from "../../../utils/ts/user";
import { menu } from "../../../utils/ts/consoleHeader";

const store = useUserStore();

const userData = computed<userType | null>(() => store.getUser());


const active = ref(0);
const hover = ref(-1);

const switchTab = (index: number, path: string) => {
  active.value = index;
  window.location.href = path;
};

const calMenuPos = () => {
  const res = calMenuChosen(
    menu.map((val) => ({ name: val.path.split("/")[1] })),
    location.hash.split("/")[1]
  );

  if (res > -1) active.value = res;
};

const hashchangeMenu = () => {
  calMenuPos();
};

onMounted(() => {
  calMenuPos();
  window.addEventListener("hashchange", hashchangeMenu);
});

onUnmounted(() => {
  window.removeEventListener("hashchange", hashchangeMenu);
});
const toProfile = () => {
  window.location.href = "/#/account/profile";
};
const toSecure = () => {
  window.location.href = "/#/account/secure";
};
const toCharge = () => {
  window.location.href = "/#/finance/charge";
};
const toDetail = () => {
  window.location.href = "/#/finance/bills";
};
</script>
<template>
  <div class="headerBox">
    <div class="left">
      <div class="logo">
        <a href="#">
          <img src="/console/logo.svg" alt="logo" />
        </a>
      </div>
      <ul class="menu">
        <li v-for="(item, index) in menu" :key="index" @click="switchTab(index, item.path)"
          :class="active === index || hover === index ? 'active' : ''" @mouseenter="hover = index"
          @mouseleave="hover = -1">
          <a href="javascript: void(0)">
            <img :src="`/console/menu${index + 1}.png`" alt="" v-if="index !== active && index !== hover" />
            <img :src="`/console/menu${index + 1}-1.png`" alt="" v-else />
            <span>
              {{ item.name }}
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="right">
      <a-dropdown>
        <div class="user">
          <img src="/console/user.png" alt="" />
        </div>
        <template #overlay>
          <div class="infoCard">
            <h4>
              {{ userData?.name || "未登录" }}
              <p>
                <img src="/console/exclamation.svg" alt="exclamation" type="image/svg+xml" />
                <span>未实名认证&nbsp;</span>
                <a type="link" size="small">去认证</a>
              </p>
            </h4>
            <div class="quickLink">
              <div class="sub">
                <a href="javascript: void(0)" style="background-image: url(/console/user1.png)" @click="toProfile">
                  基本信息
                </a>
                <a href="javascript: void(0)" style="background-image: url(/console/user2.png)" @click="toSecure">
                  安全设置
                </a>
              </div>
              <div class="sub bal">
                <a href="javascript: void(0)" style="background-image: url(/console/user3.png)" @click="toCharge">
                  账户余额
                  <span>充值</span>
                  <em>{{ userData?.wallet.balance || "0" }}元</em>
                </a>
                <a href="javascript: void(0)" style="background-image: url(/console/user4.png)" @click="toDetail">
                  收支明细
                </a>
              </div>
              <div class="sub">
                <a href="#" style="background-image: url(/console/user5.png)">
                  退出
                </a>
              </div>
            </div>
          </div>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<!-- <style lang="scss" scoped>
$activeBg: #2c3138;
.infoCard {
  width: 300rem;
  height: 301rem;
  margin-top: -5px;
  background-color: #2d3340;

  @mixin hoverEffect {
    &:hover {
      background: #242933;
    }
  }

  @mixin fontHover {
    transition: color 0.3s;
    &:hover {
      color: #1861f2;
    }
  }
  .quickLink {
    display: flex;
    flex-direction: column;
    height: 215rem;

    .bal {
      span {
        margin-left: 10px;
        padding: 3px 10px;
        border: 1px solid #fa0;
        color: #fa0;
        font-size: 14rem;
      }
      em {
        float: right;
        font-size: 14rem;
        font-style: normal;
        color: #fa0;
      }
    }
    & > div {
      border-bottom: 1px solid #374053;
      padding: 15rem 20rem;
      @include hoverEffect;
      &:last-child {
        flex: 1;
        display: flex;
        align-items: center;
        border-bottom: 0;
      }
      a {
        display: block;
        padding-left: 26rem;
        color: #fff;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0;
        font-size: 14rem;
        line-height: 21rem;
        @include fontHover;
      }
      a:nth-of-type(2) {
        margin-top: 10rem;
      }
    }
  }

  h4 {
    padding: 20rem;
    font-size: 14rem;
    font-weight: 500;
    line-height: 21rem;
    transition: all 0.3s;
    color: #fff;
    margin-bottom: 0;
    border-bottom: 1rem solid #374053;
    @include hoverEffect;
    p {
      margin-top: 5rem;
      margin-bottom: 0;
      line-height: 18rem;
      color: #888;
      display: flex;
      align-items: center;
      span,
      a {
        font-size: 12rem;
      }
      img {
        margin-right: 5rem;
      }
      a {
        padding-left: 20rem;
        color: #ff4000;
        font-size: 12rem;
      }
    }
  }
}
.headerBox {
  height: 60rem;
  padding: 0;
  // background: #2d3340;
  background: #3c444d;
  box-shadow: 0 1rem 4rem rgba(0, 21, 41, 0.08);
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  .right {
    cursor: pointer;

    .user {
      height: 100%;
      padding: 0 12rem;
      display: flex;
      align-items: center;
      img {
        margin: 0 8rem;
      }
      &:hover {
        background: $activeBg;
      }
    }
  }

  .left {
    height: 100%;
    display: flex;
    .menu {
      display: flex;
      .active {
        background: $activeBg;
        span {
          color: #fff;
        }
      }
      li {
        transition: all 0.3s;
        padding: 0 20rem;
        height: 100%;
        display: flex;
        align-items: center;
        border-left: 1rem solid #3d434f;
        cursor: pointer;
        // &:hover {
        //   background: $activeBg;
        //   span {
        //     color: #fff;
        //   }
        // }
        a {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;

          img {
            width: 16rem;
            height: 16rem;
            margin-right: 10rem;
          }
          span {
            font-size: 14rem;
            line-height: 14rem;
            color: #a3b1cc;
          }
        }
      }
    }
    .logo {
      height: 100%;
      width: 200rem;
      display: flex;
      align-items: center;
      a {
        margin-left: 24rem;
      }
      img {
        // width: 100rem;
        height: 42rem;
        // height: 30rem;
      }
    }
  }
}
</style> -->
<style lang="scss" scoped>
$activeBg: #2c3138;

.infoCard {
  width: 18.75rem;
  height: 18.81rem;
  margin-top: -5px;
  background-color: #2d3340;

  @mixin hoverEffect {
    &:hover {
      background: #242933;
    }
  }

  @mixin fontHover {
    transition: color 0.3s;

    &:hover {
      color: #1861f2;
    }
  }

  .quickLink {
    display: flex;
    flex-direction: column;
    height: 13.44rem;

    .bal {
      span {
        margin-left: 10px;
        padding: 3px 10px;
        border: 1px solid #fa0;
        color: #fa0;
        font-size: 0.88rem;
      }

      em {
        float: right;
        font-size: 0.88rem;
        font-style: normal;
        color: #fa0;
      }
    }

    &>div {
      border-bottom: 1px solid #374053;
      padding: 0.94rem 1.25rem;
      @include hoverEffect;

      &:last-child {
        flex: 1;
        display: flex;
        align-items: center;
        border-bottom: 0;
      }

      a {
        display: block;
        padding-left: 1.63rem;
        color: #fff;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0;
        font-size: 0.88rem;
        line-height: 1.31rem;
        @include fontHover;
      }

      a:nth-of-type(2) {
        margin-top: 0.63rem;
      }
    }
  }

  h4 {
    padding: 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.31rem;
    transition: all 0.3s;
    color: #fff;
    margin-bottom: 0;
    border-bottom: 0.06rem solid #374053;
    @include hoverEffect;

    p {
      margin-top: 0.31rem;
      margin-bottom: 0;
      line-height: 1.13rem;
      color: #888;
      display: flex;
      align-items: center;

      span,
      a {
        font-size: 0.75rem;
      }

      img {
        margin-right: 0.31rem;
      }

      a {
        padding-left: 1.25rem;
        color: #ff4000;
        font-size: 0.75rem;
      }
    }
  }
}

.headerBox {
  height: 3.75rem;
  padding: 0;
  background: #3c444d;
  box-shadow: 0 0.06rem 0.25rem rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  //  display: flex;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  z-index: 99;

  .right {
    cursor: pointer;

    .user {
      height: 100%;
      padding: 0 0.75rem;
      display: flex;
      align-items: center;

      img {
        margin: 0 0.5rem;
      }

      &:hover {
        background: $activeBg;
      }
    }
  }

  .left {
    height: 100%;
    display: flex;

    .menu {
      display: flex;
      margin-bottom: 0;

      .active {
        background: $activeBg;

        span {
          color: #fff;
        }
      }

      li {
        transition: all 0.3s;
        padding: 0 1.25rem;
        height: 100%;
        display: flex;
        align-items: center;
        border-left: 0.06rem solid #3d434f;
        cursor: pointer;

        // &:hover {
        //   background: $activeBg;
        //   span {
        //     color: #fff;
        //   }
        // }
        a {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;

          img {
            width: 1rem;
            height: 1rem;
            margin-right: 0.63rem;
          }

          span {
            font-size: 0.88rem;
            line-height: 0.88rem;
            color: #a3b1cc;
          }
        }
      }
    }

    .logo {
      height: 100%;
      width: 12.5rem;
      display: flex;
      align-items: center;

      a {
        margin-left: 1.5rem;
      }

      img {
        // width: 6.25rem;
        height: 2.63rem;
        // height: 1.88rem;
      }
    }
  }
}
</style>
